<template>
  <div class="background_img"></div>
  <div id="login">
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">登录Discord</h3>
      <el-form-item>
        <el-input
          type="text"
          v-model="loginForm.name"
          auto-complete="off"
          placeholder="Name"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          type="password"
          v-model="loginForm.password"
          auto-complete="off"
          placeholder="Password"
        ></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%; background: #505458; border: none"
          @click="login"
          >登录</el-button
        >
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-row>
          没有账号？快来
          <div @click="register" class="be_red">注册</div>
          吧!
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.background_img {
  background-image: url("../assets/login_bg.png");
  background-size: 100% 100%;
  /*按比例缩放*/
  background-repeat: no-repeat;
  /*还有repeat-x,y等*/
  width: 100%;
  top: 0px;
  left: 0px;
  height: calc(100vh - 0px);
  position: absolute;
  overflow: hidden;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.be_red {
  color: red;
  font-weight: bolder;
}

#login {
  /*绝对居中定位*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useStore } from "vuex";

export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const loginForm = ref({ name: "", password: "" });
    const login = () => {
      if (loginForm.value.name === "" || loginForm.value.password === "") {
        ElMessage("Please fill in completely.");
        return;
      }
      axios
        .post("/api/login", {
          name: loginForm.value.name,
          password: loginForm.value.password,
          client_type: "1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            //ElMessage(res.data.message);
            store.commit("INIT_USER", res.data.data);
            //ElMessage(store.getters.CurrentUser.token);
            router.push("/channels/@me/my_friend");
          }
        })
        .catch((error) => {
          console.log(error);
          ElMessage("登录失败");
        });
    };

    const register = () => {
      router.push("/register");
      //注册页面
    };

    return {
      loginForm,
      login,
      register,
    };
  },
};
</script>
